<template>
	<div class="content">
		<heads :current='5'></heads>
		<div class="banner">
			<a href="#">
				<img :src="faq" />
				<div class="font">
					<p>{{ $t('faq.title') }}</p>
				</div>
			</a>
		</div>
		<div class="main_faq">
			<div class="m">
				<ul>
					<li v-for="(item, index) in faqItems"  :key="index">
						<div class="line" :class="{'on':item.flag}" @click="item.flag = !item.flag">
							<img src="@/assets/images/xb2.png" />
							<p>{{item.name}}</p>
						</div>
						<div class="slide" v-show="item.flag" v-html="item.desc"></div>
					</li>
				</ul>
				<div class="public_button">
					<a href="/#/contact">{{ $t('faq.getInTouch') }}</a>
				</div>
			</div>
		</div>
		<foot></foot>
	</div>
</template>

<script>
	export default {
		name: 'index',
		data() {
			return {
				faqItems: []
			}
		},
		created() {
			this.initializeFaqItems()
		},
		watch: {
			'$i18n.locale': {
				handler() {
					this.initializeFaqItems()
				},
				immediate: true
			}
		},
		computed: {
      banner() {
        return this.$store.state.banners || {}
      },
      // 产品头部-3-Hour Sunset Fishing Cruise
      faq() {
        return ((this.banner['faq'] || { url: '' }).url).split(',')[0]
      },
    },
		methods: {
			initializeFaqItems() {
				this.faqItems = [
					{
						flag: false,
						name: this.$t('faq.items.boarding.title'),
						desc: this.$t('faq.items.boarding.content')
					},
					{
						flag: false,
						name: this.$t('faq.items.fishingTypes.title'),
						desc: this.$t('faq.items.fishingTypes.content')
					},
					{
						flag: false,
						name: this.$t('faq.items.diving.title'),
						desc: this.$t('faq.items.diving.content')
					},
					{
						flag: false,
						name: this.$t('faq.items.included.title'),
						desc: this.$t('faq.items.included.content')
					},
					{
						flag: false,
						name: this.$t('faq.items.refund.title'),
						desc: this.$t('faq.items.refund.content')
					},
					{
						flag: false,
						name: this.$t('faq.items.childDiscount.title'),
						desc: this.$t('faq.items.childDiscount.content')
					},
					{
						flag: false,
						name: this.$t('faq.items.capacity.title'),
						desc: this.$t('faq.items.capacity.content')
					},
					{
						flag: false,
						name: this.$t('faq.items.drinks.title'),
						desc: this.$t('faq.items.drinks.content')
					},
					{
						flag: false,
						name: this.$t('faq.items.seasickness.title'),
						desc: this.$t('faq.items.seasickness.content')
					},
					{
						flag: false,
						name: this.$t('faq.items.sharedTrips.title'),
						desc: this.$t('faq.items.sharedTrips.content')
					},
					{
						flag: false,
						name: this.$t('faq.items.license.title'),
						desc: this.$t('faq.items.license.content')
					}
				]
			}
		}
	}
</script>

<style>

</style>
